<template>
	<view class="appointmentSsuccessful">
		<view class="successful">
			<image src="/static/image/duide.png" mode="scaleToFill" style="width: 190rpx; height: 190rpx;"></image>
			<text class="appointments">预约成功</text>
			<text class="confirm">请耐心等待确认</text>
		</view>
		<text class="customerService">门店客服：{{name}} {{tel}}</text>

		<view class="success" @click="jumpsuccess">
			<text>完成</text>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.page = options.page;
			this.getTel(options.id);
			console.log(options.id);
			this.delta = options.delta;
		},
		data() {
			return {
				page: null,
				urls: null,
				tel: null,
				name: null,
				// 跳转上两个页面
				delta: null,
			};
		},
		methods: {
			jumpsuccess() {
				if (this.delta == 2) {
					uni.navigateBack({
						delta: 2
					});
				} else {
					uni.navigateBack();
				};
			},
			async getTel(id) {
				const tel = await this.$myrequest({
					url: `Service/getContact?id=${id}`,
				});
				this.tel = tel.data.data.contact_phone;
				this.name = tel.data.data.contact_name;
			},
		}
	}
</script>

<style lang="scss">
	text {
		width: 100%;
		display: inline-block;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
	}

	.appointmentSsuccessful {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.successful {
		margin: 50% auto 10rpx;
		width: 505rpx;
		border-bottom: 1rpx solid #DBDBDB;

		image {
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.appointments {
			margin: 40rpx auto 73rpx;
			font-size: 36rpx;
			color: rgba(45, 209, 188, 1);
		}

		.confirm {
			margin-bottom: 20rpx;
		}
	}

	.success {
		@include dibuanniu;
		width: 689rpx;
		letter-spacing: 10rpx;
	}

	.customerService,
	.confirm {
		font-size: 26rpx;
		color: rgba(179, 179, 179, 1);
	}
</style>
